<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="icon" href="${pageContext.request.contextPath}/assets/images/favicon.png" type="image/png">

    <!--Begin  Page Level  CSS -->
    <link href="${pageContext.request.contextPath}/assets/plugins/morris-chart/morris.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
    <link href="${pageContext.request.contextPath}/assets/plugins/datatables/css/jquery.datatables.min.css"
          rel="stylesheet"/>
    <!--End  Page Level  CSS -->
    <link href="${pageContext.request.contextPath}/assets/css/icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/responsive.css" rel="stylesheet">

    <script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/plugins/datatables/js/jquery.datatables.min.js"></script>
    <style>
        .main-content {
            background-color: white;
        }

        th, td {
            text-align: center
        }

        #btn11 {
            float: right;
            margin-right: 5%;
        }

        .el-card__body {
            margin-bottom: 10px;
            padding: 20px 8px 25px 8px;
            font-size: 14px;
        }

        .head-one, .white-box {
            border: #ebeef5 solid 2px;
        }

        #page {
            text-align: center;
            width: 34px;
            height: 34px;
        }

        #select_pageSize {
            width: 80px;
            height: 34px;
        }

        .selectC {
            display: inline-block;
            border-top-left-radius: .3rem;
            padding: .67rem 1.5rem;
            font-size: 1.25rem;
            margin-left: -1px;
            line-height: 1.25;
            background-color: #fff;
            border: 1px solid #dee2e6;
            border-bottom-left-radius: .3rem
        }

        .selectC:focus {
            outline: 0;
            box-shadow: 0 0 0 .0rem rgba(0, 123, 255, .25)
        }

        .toPage {
            display: inline-block;
            /*border-top-left-radius: .3rem;*/
            /*padding: .85rem 1.5rem;*/
            font-size: 1.25rem;
            height: 34px;
            margin-left: -1px;
            line-height: 1.25;
            /*background-color: #fff;*/
            border: 1px solid #dee2e6;
            /*border-bottom-left-radius: .3rem;*/
            width: 34px;
        }

        .toPage[type=text]:focus {
            outline: 0;
            box-shadow: 0 0 0 .0rem rgba(0, 123, 255, .25)
        }
    </style>
</head>

<%--class="sticky-header"--%>
<body>
<div class="main-content" style="background-color: rgb(238, 238, 238); min-height: 870px;">
    <jsp:include page="../inc/header.jsp"/>
    <jsp:include page="../inc/left.jsp"/>

    <div class="wrapper" style="background-color: #eeeeee;width: 100%">
        <div class="page-title-box" style="background-color: #FFFFFF;">
            <h4 class="page-title">品牌列表</h4><span>(冉强强)</span>
            <ol class="breadcrumb">
                <li>
                    <a href="${pageContext.request.contextPath}/index">首页</a>
                </li>
                <li>
                    <a href="productBrand">品牌</a>
                </li>
                <li class="active">
                    品牌列表
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>

        <%--        <div class="el-card__body ">--%>
        <%--            <div class="el-card__body head-one">--%>
        <%--                <div style="margin-top: 15px;">--%>
        <div class="container"
             style="margin-top: 20px;margin-bottom: 0px;  border:solid 1px rgba(0,0,0,0.2);padding: 20px;background-color: #FFFFFF;">
            <form method="post" action="${pageContext.request.contextPath}/goods/selectBrand">
                <div data-v-2ef16592=""><i class="fa fa-search"></i> <span
                        data-v-2ef16592="" style="font-size: 16px">模糊搜索</span>
                </div>
                <div class="row">
                    <div class="form-inline line-one">
                        <div class="col-md-3 col-lg-offset-1 ">
                            <label class="control-label wk-filed-label">品牌名称： </label>
                            <div class="input-group">
                                <input name="name" type="text"
                                       class="form-control wk-long-2col-input" placeholder="品牌名称"/>
                            </div>
                        </div>
                        <div class="col-md-3 col-lg-offset-1 col-sm-8">
                            <label class="control-label wk-filed-label">品牌首字母： </label>
                            <div class="input-group">
                                <input name="firstLetter" type="text"
                                       class="form-control wk-long-2col-input" placeholder="品牌首字母"/>
                            </div>
                        </div>
                        <div class="col-md-3 col-lg-offset-9">
                            <button type="submit" class="btn-primary" style="float: right;margin-right: 20px;padding-top: 4px;padding-bottom: 4px">
                                <span>查询搜索</span></button>
                            <a href="${pageContext.request.contextPath}/goods/productBrand">
                                <div class="btn-sm btn-default" style="float: right; margin-right: 15px;">
                                    <span>重置</span></div>
                            </a>
                        </div>

                    </div>
                </div>
            </form>
<%--            <button id="btn11" class="btn btn-success">--%>
<%--                <a href="addBrand"><span>添加</span></a>--%>
<%--            </button>--%>
        </div>
        <div class="container"
             style="margin-top: 20px;margin-bottom: 20px;  border:solid 1px rgba(0,0,0,0.2);padding: 1px;background-color: #FFFFFF">
            <div class="el-card__body"><i class="fa fa-bar-chart-o"></i> <span>数据列表</span>
                <a type="button" href="addBrand" class="btn btn-primary" style="float:right;margin-right:5%">
                    <span>添加</span>
                </a>
            </div>
        </div>
        <div class="container" style="background-color: #FFFFFF">
            <%--            <div id="example_wrapper" class="dataTables_wrapper"> dataTable aria-describedby="example_info" --%>
            <table class="table table-bordered table-main">
                <thead>
                <tr>
                    <th style="width: 10px;text-align: center"><input type="checkbox"></th>
                    <th class="sorting_asc" style="width: 10px;">编号
                    </th>
                    <th class="sorting" style="width: 50px;">品牌名称
                    </th>
                    <th class="sorting" style="width: 33px;">品牌首字母
                    </th>
                    <th class="sorting" style="width: 33px;">排序
                    </th>
                    <th class="sorting" style="width: 33px;">品牌制造商
                    </th>
                    <th class="sorting" style="width: 33px;">是否显示
                    </th>
                    <th class="sorting" style="width: 50px;">品牌图片
                    </th>
                    <th class="sorting" style="width: 65px;">相关
                    </th>
                    <th class="sorting" style="width: 65px;">操作
                    </th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${brandList.list}" var="u" varStatus="s">
                    <tr brand="row" class="odd">
                        <td><input type="checkbox" id="checks"></td>
                        <td>${u.id}</td>
                        <td>${u.name}</td>
                        <td>${u.firstLetter}</td>
                        <td>${u.sort}</td>
                        <td>
                            <div class="div2"><a
                                    href="${pageContext.request.contextPath}/goods/updateStatus1/${u.id}"><i
                                    class="fa fa-2x fa-toggle-${u.factoryStatus==1?'on':'off'}"></i></a></div>
                        </td>
                        <td>
                            <div class="div2"><a
                                    href="${pageContext.request.contextPath}/goods/updateStatus2/${u.id}"><i
                                    class="fa fa-2x fa-toggle-${u.showStatus==1?'on':'off'}"></i></a></div>
                        </td>
                        <td><img src="${u.logo}" width="45px" height="40px"/></td>
                        <td>商品：${u.productCount} 评价：${u.productCommentCount}</td>
                        <td>
                                <%--                                <div class="cell">--%>
                            <button type="button" class="btn btn-info" onclick="updBrand(${u.id})">编辑</button>
                            <button type="button" class="btn btn-danger" onclick="delBrand(${u.id})">删除</button>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            
            <!--分页开始-->
            <nav aria-label="...">
                <ul class="pagination">
                    <span id="current" hidden>${brandList.pageNum}</span>
                    <span id="currentLimit" hidden>${brandList.pageSize}</span>
                    <li class="page-item disabled" style="border-color:white">
                        <span class="page-link"
                              href="${pageContext.request.contextPath}/#">共${brandList.total}条数据</span>
                    </li>
                    <li style="float: left" class="page-item">
                        <select id="select_pageSize" name="pageSize" class="selectC">
                            <option value="10" ${brandList.pageSize==10?"selected":""}>10条/页</option>
                            <option value="12" ${brandList.pageSize==12?"selected":""}>12条/页</option>
                            <option value="14" ${brandList.pageSize==14?"selected":""}>14条/页</option>
                            <option value="16" ${brandList.pageSize==16?"selected":""}>16条/页</option>
                        </select>
                    </li>
                    <li class="page-item ${brandList.pageNum==1?"disabled":""}">
                        <a class="page-link "${brandList.pageNum==1?"href='#'":""}
                           href="${pageContext.request.contextPath}/goods/brand?page=${brandList.pageNum-1}&size=${brandList.pageSize}">上一页</a>
                    </li>
                    <li class="page-item ${brandList.pageNum==1?"active":""}">
                        <a class="page-link"
                           href="${pageContext.request.contextPath}/goods/brand?page=1&size=${brandList.pageSize}">1</a>
                    </li>

                    <c:if test="${brandList.pageNum>2}">
                        <li class="page-item disabled">
                            <span class="page-link">...</span>
                        </li>
                    </c:if>

                    <c:if test="${brandList.pageNum>1&&brandList.pageNum<brandList.pages}">
                        <li class="page-item ${(brandList.pageNum>1&&brandList.pageNum<brandList.pages)?"active":""}">
                            <span class="page-link">${brandList.pageNum}</span>
                        </li>
                    </c:if>

                    <c:if test="${brandList.pageNum<brandList.pages-1}">
                        <li class="page-item disabled ">
                            <span class="page-link">...</span>
                        </li>
                    </c:if>

                    <c:if test="${brandList.pages>1}">
                        <li class="page-item ${brandList.pageNum==brandList.pages?"active":""}">
                            <a id="cntpage" class="page-link "
                               href="${pageContext.request.contextPath}/goods/brand?page=${brandList.pages}&size=${brandList.pageSize}">${brandList.pages}</a>
                        </li>
                    </c:if>
                    <li class="page-item  ${brandList.pageNum==brandList.pages?"disabled":""}">
                        <a class="page-link" ${brandList.pageNum==brandList.pages?"href='#'":""}
                           href="${pageContext.request.contextPath}/goods/brand?page=${brandList.pageNum+1}&size=${brandList.pageSize}">下一页</a>
                    </li>
                    <li class="page-item">
                        <span class="disabled">前往</span>
                        <input id="page" type="text" class="toPage" style="float:left;">
                        <span class="disabled">页</span>
                    </li>

                </ul>
            </nav>
            <!--分页结束-->
            <jsp:include page="../inc/footer.jsp"/>

        </div>
    </div>
</body>

<script>
    function addBrand() {
        location.href="/goods/addBrand";
    }

    function updBrand(id) {
        console.log(id)
        location.href="${pageContext.request.contextPath}/goods/updBrand/"+id;
    }
    function delBrand(id) {
        location.href="${pageContext.request.contextPath}/goods/delBrand/"+id;
    }




</script>

<script>
        $('#select_limit').bind("change",function (){
        let size = $("#select_limit").find("option:selected").val();
        let tag = $("<a>")
        tag[0].href="${pageContext.request.contextPath}/goods/brand?page=1"+"&size="+size;
        tag[0].click();
    })

    $('#page').bind("keyup",function (obj) {
        let key = obj.originalEvent.keyCode
        let page = $("#page").val();
        let mpage = $("#cntpage").text();
        let size = $("#currentLimit").text();
        if(key===13){
            if(!(page<=mpage && page>0)) {
                alert("输入范围错误！！！")
            }else {
                let tag = $("<a>")
                tag[0].href="${pageContext.request.contextPath}/goods/brand?page="+page+"&size="+size;
                tag[0].click();
            }
        }
    })



</script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.nicescroll.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/functions.js"></script>
</html>
